<template>
    <section v-loading="loading" class="cms-body">
         <div class="cms-list-header">
               <el-button type="primary" 
             icon="el-icon-plus"
             @click="dialogVisible = true"
              v-perms="'/tag/add'"          
              >添加</el-button>
              <cms-input v-model="params.queryName" label="名称"></cms-input>
              <el-button @click="query">查询</el-button> 
         </div>
         <el-table :data="tableData" stripe style="width: 100%" @selection-change="checkIds">
            <el-table-column type="selection" width="65" align="right"></el-table-column>
            <el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
            <el-table-column prop="name" label="名称" align="left"></el-table-column>
            <el-table-column prop="count" label="文档数" align="right"></el-table-column>

            <el-table-column prop="name" label="操作"   align="center">
                <div slot-scope="scope">
                    <cms-button type="edit" @click.native="edit(scope.row.name,scope.row.id)"
                        v-perms="'/tag/edit'" 
                    ></cms-button>
                    <cms-button type="delete" @click.native="deleteBatch($api.wordTagDelete,scope.row.id)"
                         v-perms="'/tag/delete'"
                    ></cms-button>
                </div>
            </el-table-column>
         </el-table> 
          <!-- 表格底部 -->
        <div class="cms-list-footer ">
            <div class="cms-left">
                <el-button :disabled="disabled" @click="deleteBatch($api.wordTagDelete,ids)"
                        v-perms="'/tag/delete'"
                  >批量删除</el-button>
            </div>
               <!-- cms分页组件 -->
              <cms-pagination :total="total" @change="getPages"></cms-pagination>
          </div>  
          <el-dialog title="Tag管理 - 添加"  :visible.sync="dialogVisible"  width="30%"  :before-close="handleClose">
                <span>
                     <el-form ref='form' :model='addParams' :rules="rules" label-width="80px"  >
                            <el-form-item label="名称"  prop="name">
                                <el-input v-model="addParams.name" ></el-input>
                            </el-form-item>
                      </el-form>  
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">确定</el-button>
                </span>
         </el-dialog> 
          <el-dialog  title="Tag管理 - 修改"  :visible.sync="dialogVisible1"  width="30%"  :close-on-click-modal="false"   :before-close = "handleClose" >
                <span>
                      <el-form ref='form1' :model='updateParams' :rules="rules"  label-width="80px" >
                            <el-form-item label="名称"  class="flex-100" prop="updateName">
                                <el-input v-model="updateParams.updateName"  class="cms-width"></el-input>
                            </el-form-item>
                      </el-form>  
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                    <el-button type="primary" @click="update">确定</el-button>
                </span>
         </el-dialog> 
     </section>   
</template>

<script>
import listMixins from '@/mixins/list';
import va from "@/rules";
import api from "@/api/api";
import axios from "axios";
export default {
    mixins:[listMixins],
  data() {
    let self = this;
    let checkTagName =  va.checkTagName('');
    let required = va.required('此项必填');
    return {
      params: {//只需要业务参数    
        queryName:'',
        pageNo:'',
        pageSize:'',
      },
       rules: {//校验规则
        name:[required,checkTagName],
        updateName:[required],
      },
      addParams:{
           name:'',
      },  
      updateParams:{
        updateId:'',
        updateName:'',  
      },
      dialogVisible: false,
      dialogVisible1: false,
      tapTipSave:false,
     
     regDefId:0
    };
  },
  methods:{
      save(){
           let form = this.$refs['form'];
            form.validate((valid) => {//验证方法
                if(valid){
                         this.$http.post(this.$api.wordTagSave,{name:this.addParams.name}) .then(res => {
                            this.dialogVisible=false; 
                            if(res.code == '200'){
                                this.addParams.name = '';
                                this.successMessage('添加成功');
                                this.initTableData(this.$api.wordTagList,this.params); 
                            }
                            this.loading = false;
                        }).catch(error => {
                            this.dialogVisible=false;
                            this.loading = false;
                        })
                }else{
                     return false;
                }
            })
      },
      edit(name,value){
        this.updateParams.updateName=''; 
        this.updateParams.updateName=name;    
        this.updateParams.updateId=value;
        let  rule =   [ va.required('此项必填')];
        rule.push(va.checkTagName(value));
        this.rules.updateName  =rule;
        this.tapTipSave=false,
        this.dialogVisible1=true;

      },
      update(){   
           let form = this.$refs['form1'];
            form.validate((valid) => {//验证方法
                if(valid){ 
                    this.$http.post(this.$api.wordTagUpdate,{id:this.updateParams.updateId,name:this.updateParams.updateName}).then(res => {
                        this.dialogVisible1=false;
                        if(res.code == '200'){
                            this.successMessage('修改成功')
                            this.updateParams.updateId = '';
                            this.initTableData(this.$api.wordTagList,this.params); 
                        }
                        this.loading = false;
                    }).catch(error => {
                        this.dialogVisible=false;
                        this.loading = false;
                    })
                }else{
                     return false
                }
            })         
      },
      handleClose(done) {
            this.updateParams.updateId = '';
            done();
      }
  },
  created(){
     this.initTableData(this.$api.wordTagList,this.params);   
  }
};
</script>
<style scoped>
  .el-dialog__body{
      min-height: 150px;
  }
</style>
